转载自网络，原文链接：https://segmentfault.com/a/1190000016579279
试想一个多人开发的项目，每次同步代码，看到各个风格迥异，换行空格混乱，4格，2格缩进交替上演的代码文件，分分钟逼死强迫症啊。忍无可忍只能拔枪相见了~~。统一的代码风格规范，对于多人开发的大项目一定是必不可少的，但是口头约定又是一定没有用的（nice脸）。这时候就需要Prettier上场了，一个配置文件，配合VScode，保存即格式化，你的同事都不需要知道代码风格是什么，整个团队只要clone项目，自动保持统一风格。搞定！
Prettier是什么
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
以上是github上的官方解释，其实就是简单的代码格式工具，和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)。而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。
Prettier怎么用
- 编辑器插件
- CLI命令行
编辑器
这里介绍VSCode中如何配置Prettier
安装 Prettier插件 Prettier - Code formatter
安装插件后，调出系统设置就能看到prettier相关选项了，如图添加自定义配置文件.prettierrc
作为项目的整体代码规范，如果依赖本地配置，显然是不科学的，所以需要.prettierrc 文件覆盖本地配置。我的配置文件如下1
2
3
4
5
6
7
8
9
10
11{
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 140,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
到此，prettier安装完毕，使用shift+alt+f就可格式化代码。当然每次手动格式化还是很费力啊，怎么办？自动保存。系统设置中增加"editor.formatOnSave": true即可自动保存，还要注意的一点是，如果同时设置了"files.autoSave": "autoSaveDelay",保存及格式化会失效。files.autoSave配置成别的选项即可。
另外，如果项目配置了.editorConfig文件，在配置了"editor.formatOnSave": true后，如果项目成员没有安装 Prettier 插件，保存时就会读取.editorConfig文件，同样可以格式化代码。启用 Prettier 插件后，.editorConfig的配置就会失效，读取.prettierrc 文件的配置
命令行
命令行用法需要安装prettier,npm install prettier --save-dev，使用prettier write **.js 就可以格式化文件。将添加到你的NPM脚本中，prettier --write './src/**/*.js,这样就可以批量格式化项目中的所有文件了。